<template>
  <view class="attendance-edit-container">
    <uni-forms ref="form" :model="form" :rules="rules">
      <view class="form-card">
        <view class="card-header">
          <text class="header-title">编辑打卡记录</text>
        </view>
        
        <view class="card-content">
          <uni-forms-item name="attendanceDate" label="日期">
            <uni-datetime-picker 
              type="date" 
              v-model="form.attendanceDate" 
              :clear-icon="false"
              placeholder="请选择日期"
            />
          </uni-forms-item>
          
          <uni-forms-item name="clockInTime" label="签到时间">
            <uni-datetime-picker 
              type="time" 
              v-model="form.clockInTime" 
              :clear-icon="true"
              placeholder="请选择签到时间"
            />
          </uni-forms-item>
          
          <uni-forms-item name="clockInLocation" label="签到地点">
            <uni-easyinput 
              v-model="form.clockInLocation" 
              placeholder="请输入签到地点"
            />
          </uni-forms-item>
          
          <uni-forms-item name="clockOutTime" label="签退时间">
            <uni-datetime-picker 
              type="time" 
              v-model="form.clockOutTime" 
              :clear-icon="true"
              placeholder="请选择签退时间"
            />
          </uni-forms-item>
          
          <uni-forms-item name="clockOutLocation" label="签退地点">
            <uni-easyinput 
              v-model="form.clockOutLocation" 
              placeholder="请输入签退地点"
            />
          </uni-forms-item>
          
          <uni-forms-item name="remark" label="备注">
            <uni-easyinput 
              v-model="form.remark" 
              placeholder="请输入备注信息"
              type="textarea"
            />
          </uni-forms-item>
        </view>
      </view>
      
      <view class="action-buttons">
        <button type="primary" @click="submitForm">保存</button>
        <button type="default" @click="cancel">取消</button>
      </view>
    </uni-forms>
  </view>
</template>

<script>
import { getAttendance, updateAttendance, addAttendance } from "@/api/system/attendance";

export default {
  name: "AttendanceEdit",
  data() {
    return {
      // 打卡ID
      id: null,
      // 表单参数
      form: {
        attendanceId: null,
        attendanceDate: this.getCurrentDate(),
        clockInTime: '',
        clockInLocation: '',
        clockOutTime: '',
        clockOutLocation: '',
        remark: ''
      },
      // 表单校验
      rules: {
        attendanceDate: {
          rules: [{
            required: true,
            errorMessage: '请选择日期'
          }]
        }
      }
    };
  },
  onLoad(options) {
    if (options.id) {
      this.id = options.id;
      this.getDetail();
    }
  },
  methods: {
    // 获取打卡详情
    getDetail() {
      getAttendance(this.id).then(res => {
        if (res.code === 200) {
          this.form = res.data || {
            attendanceId: null,
            attendanceDate: this.getCurrentDate(),
            clockInTime: '',
            clockInLocation: '',
            clockOutTime: '',
            clockOutLocation: '',
            remark: ''
          };
        }
      });
    },
    // 表单提交
    submitForm() {
      this.$refs.form.validate().then(res => {
        if (res.valid) {
          this.$modal.loading("保存中");
          
          const saveFunc = this.form.attendanceId ? updateAttendance : addAttendance;
          
          saveFunc(this.form).then(res => {
            this.$modal.closeLoading();
            if (res.code === 200) {
              this.$modal.showSuccess("保存成功");
              this.$tab.navigateBack();
            }
          }).catch(() => {
            this.$modal.closeLoading();
          });
        }
      });
    },
    // 取消按钮
    cancel() {
      this.$tab.navigateBack();
    },
    // 获取当前日期
    getCurrentDate() {
      const now = new Date();
      const year = now.getFullYear();
      const month = (now.getMonth() + 1).toString().padStart(2, '0');
      const day = now.getDate().toString().padStart(2, '0');
      return `${year}-${month}-${day}`;
    }
  }
};
</script>

<style lang="scss" scoped>
.attendance-edit-container {
  padding: 15px;
  background-color: #f5f7fa;
  min-height: 100vh;
}

.form-card {
  background-color: #fff;
  border-radius: 10px;
  padding: 15px;
  margin-bottom: 20px;
  box-shadow: 0 1px 5px rgba(0, 0, 0, 0.1);
  
  .card-header {
    padding-bottom: 10px;
    border-bottom: 1px solid #eee;
    margin-bottom: 15px;
    
    .header-title {
      font-size: 18px;
      font-weight: bold;
    }
  }
}

.action-buttons {
  display: flex;
  justify-content: space-between;
  
  button {
    width: 48%;
    height: 45px;
    font-size: 16px;
  }
}
</style> 